<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
  <ng-container *ngIf="hasVideos$ | async">
    <div class="title-page-container">
      <h2 i18n class="title-page">Other videos</h2>

      <div *ngIf="!playlist" class="title-page-autoplay"
        [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
      >
        <span i18n>AUTOPLAY</span>
        <my-input-switch
          i18n-label label="Toggle autoplay next video"
          class="small" inputName="autoplay-next-video"
          [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"
        ></my-input-switch>
      </div>
    </div>

    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
      <span i18n *ngIf="!playlist && i === 0 && length !== 0 && autoPlayNextVideo" class="title-page-next-video-label">Next video to be played</span>
      <my-video-miniature
        [displayOptions]="displayOptions" [video]="video" [user]="user" [displayAsRow]="displayAsRow"
        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
        actorImageSize="32"
      >
      </my-video-miniature>

      <hr *ngIf="!playlist && i === 0 && length > 1 && autoPlayNextVideo" />
    </ng-container>
  </ng-container>
</div>
